/*
用于存储JS的工具函数

函数封装：遵循小而美的原则
1.使用方便，灵活复用 2.实现功能的函数代码简洁 3.函数的性能

心法：复用封函数，变化改参数
*/

/*
初级写法，不够灵活
思考：如何一个函数实现获取单节点和多个节点列表的功能？
function $(selector) {
	return document.querySelector(selector);
}
*/

// 方法一：通过状态进行判断，中级程序员（薪资+10）
/*
function $(selector, isAll = false) {
	if (isAll) {
		return document.querySelectorAll(selector);
	} else {
		return document.querySelector(selector);
	}
}
*/

// 方法二：使用一个多功能的获取节点方法，大神级写法（薪资+100）
/**
 * @description 通过指定选择器获取对应的函数节点或函数列表
 * @param { string } selector 选择器
 * @returns { Element | NodeList } 函数节点或函数列表
 */
function $(selector) {
	const nodeList = document.querySelectorAll(selector);
	if (nodeList.length === 0) {
		// 伪数组长度为0，没有查询到节点，给一个提醒 console.warn()
		return console.warn(`${selector} 没有获取到节点`);
	}
	if (nodeList.length === 1) {
		// 伪书组长度为1，即查询到的是单个节点，直接将第0个取出
		return nodeList[0];
	}
	if (nodeList.length > 1) {
		// 伪数组长度大于1，即查询到的是多个节点，直接返回节点列表
		return nodeList;
	}
}



function tab(tabSelector, tabClassName, contSelector, contClassName) {
	// 1.获取相关节点
	// $('#tabList li')
	// 2.给每个li绑定点击事件
	$(tabSelector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他，移除所有的激活样式
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				// 通过对应的索引让卡片内容消失
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			// 4.再给自己增加激活样式
			this.classList.add(tabClassName);
			// 功能五：点击tab显示对应的内容
			// 1.获取相关节点
			// $("#contLt div");
			// 2.让所有的卡片内容消失
			// 3.点击li通过对应的索引显示对应的卡片内容
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
